<template>
  <div class="netBox wrap scrollBar">
    <div class="topCon">
      <div class="title">系统升级</div>
      <div class="resetCon">
        <div class="step">
          <div class="p1">
            <img :src="trueImg" alt="" />
            <div>备份</div>
          </div>
          <div
            class="line"
            :class="[step == 2 || step == 3 ? 'L2' : 'L1']"
          ></div>
          <div class="p2">
            <img
              :src="step == 2 || step == 3 ? trueImg : weiTrue"
              :class="[step == 2 || step == 3 ? 'm2' : 'm1']"
            />
            <div :class="[step == 2 || step == 3 ? 'c2' : 'c1']">升级</div>
          </div>
          <div class="line" :class="[step == 3 ? 'L2' : 'L1']"></div>
          <div class="p3">
            <img
              :src="step == 3 ? trueImg : weiTrue"
              alt=""
              :class="[step == 3 ? 'm2' : 'm1']"
            />
            <div :class="[step == 3 ? 'c2' : 'c1']">完成</div>
          </div>
        </div>
        <div class="stepTip" v-if="step == 1">
          <b style="margin-right: 15px">步骤1: 备份</b>
          若您希望保留现有配置，请点击“备份”，否则“跳过”。
        </div>
        <div v-if="step == 1">
          <el-button type="primary" @click="backup">备份</el-button>
          <el-button type="primary" style="margin-left: 40px" @click="jump"
            >跳过</el-button
          >
        </div>
        <div class="stepBut" v-if="step == 2">
          <div class="upload-box1">
            <el-input
              placeholder="未选择文件"
              v-model="fileName"
              :readonly="true"
            >
              <el-upload
                slot="append"
                :action="actionUrl"
                :show-file-list="false"
                :on-change="changeUpload"
                ref="upload"
              >
                <el-button>浏览</el-button>
              </el-upload>
            </el-input>
            <div style="margin-top: 10px; color: #ca2222">
              <b>提示: </b>升级文件扩展名为.gz格式，请联系管理员获取。
            </div>
          </div>
          <el-button type="primary" @click="upgrade">上传升级文件</el-button>
        </div>
        <div class="stepTip" v-if="step == 3">
          <b>步骤3: 完成 !</b>
        </div>
      </div>
      <div class="mark" v-if="isMark">
        <div class="loadTip">
          <img src="~@/assets/images/status/loading.png" alt="" />
          <div style="margin: 10px 0 0 -10px">上传中,请稍后...</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import trueImg from "@/assets/images/iconAll/true.png";
import weiTrue from "@/assets/images/iconAll/weiTrue.png";

import "@/assets/css/baseConfig.less";
export default {
  name: "systemUpgrade",
  data() {
    return {
      step: 1,
      fileName: "", //上传文件名称
      actionUrl: "", //上传的地址
      trueImg: trueImg,
      weiTrue: weiTrue,
      isMark: false,
    };
  },
  methods: {
    // 备份
    backup() {},
    // 跳过
    jump() {
      this.step = 2;
    },
    // 上传时的限制
    changeUpload(file, fileList) {
      console.log(file, fileList, "成功");
      if (file.status == "success") {
        this.isMark = false;
      } else {
        this.isMark = true;
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      if (/.gz$/.test(file.name)) {
        this.fileName = file.name;
      } else {
        this.$message({
          message: "请选择文件扩展名为 .gz 格式的文件",
          type: "error",
          offset: "100",
          duration: "2000",
        });
      }
    },
    // 上传升级文件
    upgrade() {
      if (this.fileName == "") {
        this.$message({
          message: "请选择配置文件",
          type: "error",
          offset: "100",
          duration: "1500",
        });
      } else {
        // this.isImport = true;
        this.$message({
          message: "上传成功!",
          type: "success",
          offset: "100",
          duration: "1500",
        });
        this.step = 3;
      }
    },
  },
};
</script>
<style lang="less">
.upload-box1 {
  .el-button {
    width: 70px;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0;
    color: #4c5967;
    background-color: #f2f2f2;
  }
  .el-input__inner {
    width: 3rem;
    font-size: 13px;
  }
}
</style>
<style lang='less' scoped>
.netBox {
  .topCon {
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    position: relative;
    // 遮罩提示
    .mark {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      .loadTip {
        position: absolute;
        left: 59%;
        top: 45%;
        transform: translateX(-50%);
        color: #fff;
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
    .resetCon {
      width: 500px;
      height: 400px;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%);
      .step {
        width: 350px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        .p1,
        .p2,
        .p3 {
          width: 100px;
          height: 100px;
        }
        .p1 {
          img {
            // margin-top: 5px;
            width: 55px;
            height: 55px;
          }
        }
        .p3,
        .p2 {
          .m1 {
            margin: 25px 0 15px;
          }
          .m2 {
            margin: 0;
            width: 55px;
            height: 55px;
          }

          .c1 {
            color: #a5a5a5;
          }
          .c2 {
            color: #585252;
          }
        }
        .line {
          width: 75px;
          height: 2px;
          margin-top: 30px;
        }
        .L1 {
          background-color: #cfcfcf;
        }
        .L2 {
          background-color: #b391ff;
        }
      }
      .stepTip {
        color: #4c5967;
        margin: 25px 0 40px;
      }
      .stepBut {
        .upload-box1 {
          margin-top: 20px;
          margin-bottom: 40px;

          .el-input-group {
            width: 150px;
          }
        }
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
